<template>
  <view class="tips_page" v-if="visible">
    <view class="tips_modal">
      <image @click="close" class="close_img" src="../../../static/icons/icon_noticeclose.png" mode="widthFix"></image>
      <view class="tlt">
        <image class="ling" src="../../../static/icons/icon-ling.png" mode="widthFix"></image>
        <text class="c1 34 fw500">{{ tlt }}</text>
      </view>
      <view class="line_1"></view>
      <view class="tips_text c1 fw400 fs30">
        {{ text }}
      </view>
      <view class="line_2"></view>
      <view class="buttons">
        <view class="button_detail fw400 c1 fs32" @click="toDetail">查看详情</view>
        <view v-if="nextNoticeId" class="line_3"></view>
        <view v-if="nextNoticeId" class="button_next fw400 fs32" @click="nextNotice">下一条</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { noticeList, noticeUnnums, noticeDetail } from '@/api/home/index'
  import { readNotice } from '@/api/info/index'
  import { ref, onMounted, nextTick } from 'vue'
  const visible = ref(false)
  const tlt = ref()
  const text = ref()
  const nextNoticeId = ref()
  const msgId = ref(null)

  // 打开
  const open = (noticeId) => {
    console.log('消息id:', noticeId)
    visible.value = true
    msgId.value = noticeId
    getNotice(msgId.value)
  }
  // 下一条
  const nextNotice = () => {
    if (nextNoticeId.value) {
      getNotice(nextNoticeId.value)
    }
  }
  // 获取消息详情
  const getNotice = (id) => {
    noticeDetail({ id: id, status: 0, needAppPush: 1 }).then((notice) => {
      nextTick(() => {
        var r = notice.result
        tlt.value = r.typeName
        text.value = r.title.length > 80 ? r.title.substring(0, 60) + '...' : r.title
        nextNoticeId.value = r.nextId
        msgId.value = r.id
        // 标记已读
        readNotice({
          id: id,
        }).then((t) => {
          console.log('已读', t)
        })
      })
    })
  }
  // 查看详情
  const toDetail = () => {
    close()
    uni.navigateTo({
      url: '/pages/info/detail?id=' + msgId.value + '&pageType=isIndex',
    })
  }
  // 关闭
  const close = () => {
    visible.value = false
    uni.showTabBar()
  }
  onMounted(() => {})
  defineExpose({
    open,
    // refreshTips,
  })
</script>

<style lang="scss" scoped>
  .tips_page {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    .tips_modal {
      position: fixed;
      width: calc(100% - 48rpx);
      height: 374rpx;
      left: 24rpx;
      top: 600rpx;
      bottom: 0;
      right: 24px;
      margin: 0 auto;
      background: #fff;
      border-radius: 8rpx;
      .close_img {
        width: 36rpx;
        height: 36rpx;
        position: absolute;
        right: 32rpx;
        top: 36rpx;
      }
      .tlt {
        margin: 0 32rpx;
        height: 108rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .ling {
          width: 40rpx;
          height: 40rpx;
          margin-right: 16rpx;
        }
      }
      .line_1 {
        width: calc(100% - 64rpx);
        margin-left: 32rpx;
        height: 2rpx;
        background: rgba(216, 216, 216, 0.3);
      }
      .tips_text {
        padding: 20rpx 32rpx;
        height: 156rpx;
        line-height: 1.6;
      }
      .line_2 {
        width: 100%;
        height: 2rpx;
        background: rgba(216, 216, 216, 0.3);
      }
      .buttons {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        height: 108rpx;
        .button_detail {
          width: 50%;
          height: 108rpx;
          line-height: 108rpx;
          text-align: center;
          color: #3072f6;
        }
        .line_3 {
          position: absolute;
          left: 50%;
          top: 0;
          width: 2rpx;
          height: 100%;
          background: rgba(216, 216, 216, 0.3);
        }
        .button_next {
          width: 50%;
          height: 108rpx;
          line-height: 108rpx;
          text-align: center;
          color: #3072f6;
        }
      }
    }
  }
</style>
